import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

import About from "../pages/About";
import Home from "../pages/Home";
import News from "../pages/News";
import Message from "../pages/Message";
import Detail from "../pages/Detail";

export default new VueRouter({
    routes: [
        {
            path: "/about",
            component: About,
        },
        {
            path: "/home",
            component: Home,
            children: [
                {
                    path: "news",
                    component: News,
                },
                {
                    path: "message",
                    component: Message,
                    children: [
                        {
                            name: "detail",
                            path: "detail/:id/:title",
                            component: Detail,
                            // 第一种写法：props为对象，传递的数据固定，极少用到
                            // props: { id: 1, title: "message1" },
                            // 第二种写法，props为布尔值，把路由收到的所有params参数通过props传递给当前组件(只能传递params参数)
                            // props: true,
                            // 第三种写法：props值为函数，该函数中的每一对key-value通过props传给当前组件
                            props(route) {
                                return {
                                    id: route.params.id,
                                    title: route.params.title,
                                };
                            },
                            // props(route) {
                            //     return {
                            //         id: route.query.id,
                            //         title: route.query.title,
                            //     };
                            // },
                        },
                    ],
                },
            ],
        },
    ],
});
